<template>
  <Card>
    <Tabs value="顺康加气">
      <TabPane label="顺康加气" name="顺康加气">
        <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
          <Form-item label="日期范围：" prop="date_time">
            <DatePicker
              v-model="searchForm.date_time"
              placeholder="请选择日期范围"
              placement="bottom-start"
              style="width: 200px"
              type="daterange"
            ></DatePicker>
          </Form-item>
          <Form-item label="车牌号：" prop="license_plate_num">
            <Input
              v-model="searchForm.license_plate_num"
              clearable
              placeholder="支持模糊搜索"
              style="width: 200px"
              type="text"
            />
          </Form-item>
          <Form-item style="margin-left:-90px;">
            <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
            <Button @click="handleReset">重置</Button>
          </Form-item>
        </Form>
        <div class="btns" style="margin-bottom:10px;">
          <upload-file-multiple
            ref="upload"
            :multiple="true"
            button-name="批量导入"
            @on-change="uploadData($event)"
          ></upload-file-multiple>
          <Button :loading="deleteDuplicateDataLoading" icon="md-trash" type="error" @click="deleteDuplicateData">
            清理重复数据
          </Button>
        </div>
        <Table
          :columns="column"
          :data="data"
          :loading="loading"
          border
          size="small"
          stripe></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchForm.pageNumber"
            :page-size="searchForm.pageSize"
            :total="total"
            show-total
            @on-change="changePage"
          />
        </Row>
      </TabPane>
      <TabPane label="逸华加气" name="逸华加气">
        <Form ref="searchYhForm" :label-width="90" :model="searchYhForm" inline>
          <Form-item label="日期范围：" prop="date_time">
            <DatePicker
              v-model="searchYhForm.date_time"
              placeholder="请选择日期范围"
              placement="bottom-start"
              style="width: 200px"
              type="daterange"
            ></DatePicker>
          </Form-item>
          <Form-item label="车牌号：" prop="license_plate_num">
            <Input
              v-model="searchYhForm.license_plate_num"
              clearable
              placeholder="支持模糊搜索"
              style="width: 200px"
              type="text"
            />
          </Form-item>
          <Form-item style="margin-left:-70px;">
            <Button icon="md-search" type="primary" @click="handleYhSearch">搜索</Button>
            <Button icon="md-refresh" @click="handleYhReset">重置</Button>
          </Form-item>
        </Form>
        <div class="btns" style="margin-bottom:10px;">
          <upload-yh-multiple
            ref="uploadYh"
            :multiple="true"
            button-name="批量导入"
            @on-change="uploadYhData($event)"
          ></upload-yh-multiple>
        </div>
        <Table
          :columns="columnYh"
          :data="yhData"
          :loading="yhLoading"
          border
          size="small"
          stripe></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchYhForm.pageNumber"
            :page-size="searchYhForm.pageSize"
            :total="totalYh"
            show-total
            @on-change="changeYhPage"
          />
        </Row>
      </TabPane>
      <TabPane label="逸华加气检气罐费用" name="逸华加气检气罐费用">
        <Form ref="searchYhCheckForm" :label-width="90" :model="searchYhCheckForm" inline>
          <FormItem label="日期：" prop="date">
            <DatePicker
              v-model="searchYhCheckForm.date"
              format="yyyy-MM"
              placeholder="选择时间"
              type="month"
              @on-change="searchYhCheckForm.date=$event"
            ></DatePicker>
          </FormItem>
          <Form-item label="车牌号：" prop="license_plate_num">
            <Input
              v-model="searchYhCheckForm.license_plate_num"
              clearable
              placeholder="支持模糊搜索"
              style="width: 200px"
              type="text"
            />
          </Form-item>
          <Form-item style="margin-left:-70px;">
            <Button icon="md-search" type="primary" @click="handleYhCheckSearch">搜索</Button>
            <Button icon="md-refresh" @click="handleYhCheckReset">重置</Button>
          </Form-item>
        </Form>
        <div class="btns" style="margin-bottom:10px;">
          <upload-file ref="uploadYhCheck" button-name="导入" @on-change="uploadYhCheckData($event)"></upload-file>
        </div>
        <Table
          :columns="columnYhCheck"
          :data="yhCheckData"
          :loading="yhCheckLoading"
          border
          size="small"
          stripe
        ></Table>
        <Row class="page" justify="end" type="flex">
          <Page
            :current="searchYhCheckForm.pageNumber"
            :page-size="searchYhCheckForm.pageSize"
            :total="totalYhCheck"
            show-total
            @on-change="changeYhCheckPage"
          />
        </Row>
      </TabPane>
    </Tabs>
    <Modal v-model="modal" :closable="false" :mask-closable="false" width="360">
      <p slot="header" style="color:#2d8cf0;text-align:center">
        <Icon type="ios-information-circle"></Icon>
        <span>文件上传成功，正在导入数据</span>
      </p>
      <div style="text-align:center">
        <Button :loading="importLoading" long size="large" type="error">导入中...</Button>
      </div>
      <div slot="footer"></div>
    </Modal>
  </Card>
</template>
<script>
import UploadFileMultiple from '../my-components/upload-file-multiple'
import UploadYhMultiple from '../my-components/upload-yh-multiple'
import UploadFile from '../my-components/upload-file'
import {deleteDuplicateData, gasList, gasYhCheckList, gasYhList, importGasYhCheck,} from '../../api/gas'

export default {
  components: {
    UploadFileMultiple,
    UploadYhMultiple,
    UploadFile
  },
  data() {
    return {
      deleteDuplicateDataLoading: false,
      searchForm: {
        line: '-1',
        license_plate_num: '',
        date_time: [null, null],
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      searchYhForm: {
        line: '-1',
        license_plate_num: '',
        date_time: [null, null],
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      searchYhCheckForm: {
        line: '-1',
        license_plate_num: '',
        date: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      loading: false,
      yhLoading: false,
      yhCheckLoading: false,
      data: [],
      yhData: [],
      yhCheckData: [],
      modal: false,
      importLoading: false,
      importYhLoading: false,
      total: 0,
      totalYh: 0,
      totalYhCheck: 0,
      column: [
        {type: 'index', width: 60, align: 'center'},
        {title: '日期', key: 'date_time', align: 'left'},
        {key: 'license_plate_num', title: '车牌号', align: 'center'},
        {key: 'gas_count', title: '气量', align: 'right'},
        {key: 'gas_amt', title: '金额', align: 'right'},
        {key: 'gas_unit_amt', title: '单价', align: 'right'},
        {key: 'card_balance', title: '卡余额', align: 'right'}
      ],
      columnYh: [
        {type: 'index', width: 60, align: 'center', fixed: 'left'},
        {
          title: '交易时间',
          width: 150,
          align: 'right',
          key: 'date_time',
          fixed: 'left'
        },
        {
          title: '车牌号',
          width: 120,
          align: 'center',
          key: 'license_plate_num',
          fixed: 'left'
        },
        {title: '客户类型', width: 120, align: 'center', key: 'custom_type'},
        {title: '卡类型', width: 120, align: 'center', key: 'card_type'},
        {title: '卡号', width: 120, align: 'center', key: 'card_num'},
        {
          title: '消费类型',
          width: 120,
          align: 'center',
          key: 'consumption_type'
        },
        {title: '加气体积', width: 120, align: 'right', key: 'gas_volume'},
        {title: '发生金额', width: 120, align: 'right', key: 'gas_amt'},
        {title: '操作员', width: 120, align: 'left', key: 'operator'},
        {
          title: '扣费时间',
          width: 150,
          align: 'right',
          key: 'deduction_time'
        },
        {title: '交易状态', width: 120, align: 'center', key: 'status'}
      ],
      columnYhCheck: [
        {type: 'index', width: 60, align: 'center'},
        {title: '时间', align: 'center', key: 'date'},
        {title: '车牌号', align: 'center', key: 'license_plate_num'},
        {title: '金额', align: 'right', key: 'amount'},
        {title: '体积', align: 'right', key: 'volume'}
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getGasList()
    },
    changeYhCheckPage(v) {
      this.searchYhCheckForm.pageNumber = v
      this.getGasYhCheckList()
    },
    changeYhPage(v) {
      this.searchYhForm.pageNumber = v
      this.getGasYhList()
    },
    getGasList() {
      this.loading = true
      gasList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.gasRecord
          this.total = res.data.count
        }
      })
    },
    getGasYhCheckList() {
      this.yhCheckLoading = true
      gasYhCheckList(this.searchYhCheckForm).then(res => {
        this.yhCheckLoading = false
        if (res.data) {
          this.yhCheckData = res.data.gasYhCheckRecord
          this.totalYhCheck = res.data.count
        }
      })
    },
    getGasYhList() {
      this.yhLoading = true
      gasYhList(this.searchYhForm).then(res => {
        this.yhLoading = false
        if (res.data) {
          this.yhData = res.data.gasYhRecord
          this.totalYh = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getGasList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getGasList()
    },
    handleYhCheckReset() {
      this.$refs.searchYhCheckForm.resetFields()
      this.searchYhCheckForm.pageNumber = 1
      this.searchYhCheckForm.pageSize = 10
      this.getGasYhCheckList()
    },
    handleYhCheckSearch() {
      this.searchYhCheckForm.pageNumber = 1
      this.searchYhCheckForm.pageSize = 10
      this.getGasYhCheckList()
    },
    handleYhReset() {
      this.$refs.searchYhForm.resetFields()
      this.searchYhForm.pageNumber = 1
      this.searchYhForm.pageSize = 10
      this.getGasYhList()
    },
    handleYhSearch() {
      this.searchYhForm.pageNumber = 1
      this.searchYhForm.pageSize = 10
      this.getGasYhList()
    },
    init() {
      this.getGasList()
      this.getGasYhList()
      this.getGasYhCheckList()
    },
    uploadData(event) {
      if (event) {
        this.getGasList()
      } else {
        this.loading = true
      }
    },
    uploadYhCheckData(event) {
      this.modal = true
      this.importLoading = true
      importGasYhCheck({url: event.url}).then(res => {
        if (res.data) {
          this.$Message.success(res.message)
          this.getGasYhCheckList()
        } else {
          this.$Message.error(res.message)
        }
        this.modal = false
        this.importLoading = false
      })
    },
    uploadYhData(event) {
      if (event) {
        this.getGasYhList()
      } else {
        this.yhLoading = true
      }
    },
    deleteDuplicateData() {
      this.deleteDuplicateDataLoading = true
      deleteDuplicateData().then(res => {
        this.deleteDuplicateDataLoading = false
        if (res.data) {
          this.$Message.success('共清除数据 ' + res.data.deleteCount + ' 条')
        }
      })
    }
  }
}
</script>
<style>
.ivu-tabs .ivu-select-dropdown {
  left: 0 !important;
}
</style>
